<template>
  <div>
    <p style="color: red">{{ phonedetail.phone_name }}</p>
    <el-divider><img src="@/assets/detailspics/充电.png" /></el-divider>
    <span>充电功率是：{{ phonedetail.charging_power }}瓦 </span>

    <el-divider><img src="@/assets/detailspics/充电.png" /></el-divider>
    <span>电池容量是：{{ phonedetail.battery }}毫安时 </span>

    <el-divider><img src="@/assets/detailspics/帧率.png" /></el-divider>
    <span
      >《和平精英》平均帧率:{{
        phonedetail.frame_rate == null
          ? "暂无数据"
          : phonedetail.frame_rate + "帧"
      }}</span
    >

    <el-divider><img src="@/assets/detailspics/时间.png" /></el-divider>
    <!-- 时间格式取年月日 -->
    <span>上市时间：{{ phonedetail.marketedTime.substring(0, 10) }}</span>

    <el-divider><img src="@/assets/detailspics/积分.png" /></el-divider>
    <!-- 聊下这个品牌{{phonedetail.phone_pic}} -->
    <!-- 如果没有的话 -->
    <span
      >安兔兔跑分：{{
        phonedetail.points == null ? "暂无跑分" : phonedetail.points
      }}</span
    >

    <el-divider><img src="@/assets/detailspics/价格.png" /></el-divider>
    <span>发售价格：{{ phonedetail.price }}元</span>

    <el-divider><img src="@/assets/detailspics/cpu.png" /></el-divider>
    <span>处理器：{{ phonedetail.soc }}</span>

    <el-divider><img src="@/assets/detailspics/尺寸.png" /></el-divider>
    <span>屏幕尺寸：{{ phonedetail.screen_size }}英寸</span>

    <el-divider><img src="@/assets/detailspics/重量.png" /></el-divider>
    <span>重量：{{ phonedetail.weight }}g</span>

    <el-divider><img src="@/assets/detailspics/重量.png" /></el-divider>
    <span>厚度：{{ phonedetail.thick }}g</span>

    <el-divider><img src="@/assets/detailspics/尺寸.png" /></el-divider>
    <span>宽度：{{ phonedetail.width }}毫米</span>

    <el-divider><img src="@/assets/detailspics/评分.png" /></el-divider>
    <span>手感评分：{{ feelingscore }}分</span>

    <el-divider></el-divider>
    <!-- <div class="tis">vwddvs</div> -->
  </div>
</template>

<script>
export default {
  name: "singlephone",
  data() {
    return {
      // 手感评分
      feelingscore: 0,
    };
  },
  props: {
    phonedetail: {},
  },
  computed: {
    num() {
      // 厚度得分
      let thickpoint = (8 - this.phonedetail.thick) * 0.85;
      // 重量得分
      let weightpoint = (180 - this.phonedetail.weight) / 18;
      // 宽度得分
      let widthpoint = 73 - this.phonedetail.width;
      return (thickpoint + weightpoint + widthpoint + 10).toFixed(2);
    },
  },
  watch: {
    // 监听手感的得分
    num: {
      handler(newscore) {
        this.feelingscore = newscore;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.feelingscore = this.num;
  },
};
</script>

<style scoped>
p {
  text-align: center;
}
img {
  /* display: inline-block; */
  height: 20px;
  width: 20px;
}
span {
  margin-left: 2rem;
}
.tis {
  width: 80;
  border: 1 solid black;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>
